<template>
  <div class="app-container calendar-list-container">
    <!-- <div style="height:400px">
      <el-amap class="amap-box"
      :zoom="zoom"
      :center="center"
      :mapStyle="mapStyle"
      :plugin="plugins"

      >
        <div v-for="(item,index) in deviceIfo"
            :key="index">
          <el-amap-marker
            topWhenClick="true"
            :position="[item.longitude,item.latitude]"
            :content="content"
            :events="events"
            :extData="item"
            />
          <el-amap-info-window
            :visible="item.showFlag"
            @close="infoWindowClose(item)"
            @open="infoWindowOpen(item)">
             <div class="mapMaker">
                <el-button type="success" class="titleMaker">设备详细信息</el-button>

                <div class="deviceIfo">
                  <p>
                    设备编号:
                    <span>{{item.equipmentNumber}}</span>
                  </p>
                  <p>
                    设备类型:
                    <span>
                      {{
                      item.equipmentType==1?"交流充电桩":
                      item.equipmentType==2?"直流充电桩":
                      item.equipmentType==3?"交直流充电桩":
                      item.equipmentType==4?"大功率充电桩":
                      "未知"}}
                    </span>
                  </p>
                  <p>
                    设备状态:
                    <span>
                      {{item.equipmentStatus==1?"在线":"离线"}}</span>
                  </p>
                  <p>
                    设备所在地:
                    <span>{{item.equipmentAddress}}</span>
                  </p>
                </div>

                <el-button type="success" class="titleMaker">设备格口状态</el-button>

                <div class="deviceIfo">
                  <p>
                    设备格口数:
                    <span>{{machineInfo.length}}</span>
                  </p>
                  <div class="isUseBox">
                    <div
                      :class="item.isUse==1?'geKou1':item.isUse==2?'geKou1 geKou2 ':'geKou1'"
                      v-for="(item,index) in machineInfo"
                      :key="index"
                    >
                      <span>
                        {{item.mouthStatus==0?"设备空闲":
                        item.mouthStatus==1?"充电中":
                        item.mouthStatus==2?"电池充满":
                        item.mouthStatus==3?"限额充电":
                        item.mouthStatus==4?"电池识别异常":
                        item.mouthStatus==5?"输出短路故障":
                        item.mouthStatus==6?"输出过压":
                        item.mouthStatus==7?"输出过流":
                        item.mouthStatus==8?"系统过温":
                        item.mouthStatus==9?"NTC异常":
                        item.mouthStatus==10?"电池故障":
                        item.mouthStatus==11?"负载断电":
                        item.mouthStatus==12?"电源故障":
                        item.mouthStatus==13?"通讯超时":
                        item.mouthStatus==14?"过压关机":
                        item.mouthStatus==15?"电池反接":
                        item.mouthStatus==16?"充电超时":"未知状态"}}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
          </el-amap-info-window>
        </div>
      </el-amap>

    </div>  -->

    <div class="edit" style="margin-bottom: 20px">
      <div class="eqCount" v-if="this.$store.state.user.userInfo.managerId == '0'">
        <div class="profit">
          <div class="pTop" style="height: 50%">
            <h4 class="pTitle">电量消耗（度）</h4>
            <span
              ><count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="electricQuantity"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
          <div class="pBottom" style="height: 50%">
            <div class="pTitle" style="color: green; font-weight: 700">
              总充值金额（元）
            </div>
            <i style="font-size: 12px; color: red; display: block"
              >(注：总充值金额= 余额充值的实际金额 + IC卡充值的实际金额 +
              会员卡购买的实际金额 )</i
            >
            <span
              ><count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="
                  (money.earnings.balance.actual +
                    money.earnings.ic.actual +
                    money.earnings.card.actual) /
                  100
                "
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
        </div>
        <div class="balance">
          <h4 class="recharge_Title">余额-充值（元）</h4>
          <div class="actual">
            <h6>实际金额</h6>
            <span
              ><count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.earnings.balance.actual / 100"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
          <div class="give">
            <h6>赠送金额</h6>
            <span
              ><count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.earnings.balance.giving / 100"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
        </div>
        <div class="balance">
          <h4 class="recharge_Title">IC卡-充值（元）</h4>
          <div class="actual">
            <h6>实际金额</h6>
            <span
              ><count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.earnings.ic.actual / 100"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
          <div class="give">
            <h6>赠送金额</h6>
            <span>
              <count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.earnings.ic.giving / 100"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
        </div>
      </div>
      <div class="cons">
        <div class="equipment">
          <div class="eTop" style="height: 50%">
            <h4 class="eTitle">设备总数</h4>
            <span
              ><count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="equipmentNum"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
          <div class="eBottom">
            <h4 class="eTitle">离线设备总数</h4>
            <span style="color: red">
              <count-to
                style="color: red"
                class="card-panel-num"
                :startVal="0"
                :endVal="equipmentoffLineNum"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
        </div>
        <div class="consumption">
          <h4 class="recharge_Title">总消费（元）</h4>
          <div class="actual">
            <h6>实际金额</h6>
            <i style="font-size: 12px; color: red; display: block"
              >(注：实际金额= 余额消费的实际金额 + IC卡消费的实际金额 )</i
            >
            <span>
              <count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="
                  (money.consumption.balance.actual +
                    money.consumption.ic.actual) /
                  100
                "
                :duration="2500"
                :decimals="2"
              ></count-to>
            </span>
          </div>
          <div class="give">
            <h6>赠送金额</h6>
            <i style="font-size: 12px; color: red; display: block"
              >(注：赠送金额= 余额消费的赠送金额 + IC卡消费的赠送金额 )</i
            >
            <span
              ><count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="
                  (money.consumption.balance.giving +
                    money.consumption.ic.giving) /
                  100
                "
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
        </div>
        <div class="consumption">
          <h4 class="recharge_Title">余额-消费（元）</h4>
          <div class="actual">
            <h6>实际金额</h6>
            <span>
              <count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.consumption.balance.actual / 100"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
          <div class="give">
            <h6>赠送金额</h6>
            <span>
              <count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.consumption.balance.giving / 100"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
        </div>
        <div class="consumption">
          <h4 class="recharge_Title">IC卡-消费（元）</h4>
          <div class="actual">
            <h6>实际金额</h6>
            <span
              ><count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.consumption.ic.actual / 100"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
          <div class="give">
            <h6>赠送金额</h6>
            <span
              ><count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.consumption.ic.giving / 100"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
        </div>
        <div class="balance">
          <h4 class="recharge_Title">会员卡-购买(元)</h4>
          <div class="vip">
            <h6>实际金额</h6>
            <span>
              <count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.earnings.card.actual / 100"
                :duration="2500"
                :decimals="2"
              ></count-to
            ></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 原：注释掉三个 -->
    <!-- <div style="margin-bottom: 20px">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12" :span="12" ref="anitem">
          <el-card>
            <div slot="header">设备总数</div>
            <count-to
              class="card-panel-num"
              :startVal="0"
              :endVal="equipmentNum"
              :duration="2500"
              :decimals="2"
            ></count-to>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="12" :span="12" ref="anitem">
          <el-card>
            <div slot="header">设备离线总数</div>
            <count-to
              style="color: red"
              class="card-panel-num"
              :startVal="0"
              :endVal="equipmentoffLineNum"
              :duration="2500"
              :decimals="2"
            ></count-to>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" :span="24" ref="anitem">
          <el-card>
            <div slot="header">电量消耗(度)</div>
            <count-to
              class="card-panel-num"
              :startVal="0"
              :endVal="electricQuantity"
              :duration="2500"
              :decimals="2"
            ></count-to>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" :span="24" ref="anitem">
          <el-card>
            <div slot="header" style="color: green; font-size: 20px">
              总收益(元)
              <i style="color: red; font-size: 15px"
                >(注：总收益= 余额充值的实际金额 + IC卡充值的实际金额 +
                会员卡购买的实际金额 )</i
              >
            </div>
            <count-to
              class="card-panel-num"
              :startVal="0"
              :endVal="
                (money.earnings.balance.actual +
                  money.earnings.ic.actual +
                  money.earnings.card.actual) /
                100
              "
              :duration="2500"
              :decimals="2"
            ></count-to>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="6" :span="6" ref="anitem">
          <el-card>
            <div slot="header" style="color: green; font-size: 20px">
              余额-充值(元)
            </div>
            <p style="font-size: 14px">实际金额</p>

            <count-to
              class="card-panel-num"
              :startVal="0"
              :endVal="money.earnings.balance.actual / 100"
              :duration="2500"
              :decimals="2"
            ></count-to>

            <div>
              <p style="font-size: 14px">赠送金额</p>
              <count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.earnings.balance.giving / 100"
                :duration="2500"
                :decimals="2"
              ></count-to>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="6" :span="6" ref="anitem">
          <el-card>
            <div slot="header" style="color: green; font-size: 20px">
              IC卡-充值(元)
            </div>
            <p style="font-size: 14px">实际金额</p>
            <count-to
              class="card-panel-num"
              :startVal="0"
              :endVal="money.earnings.ic.actual / 100"
              :duration="2500"
              :decimals="2"
            ></count-to>

            <div>
              <p style="font-size: 14px">赠送金额</p>

              <count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.earnings.ic.giving / 100"
                :duration="2500"
                :decimals="2"
              ></count-to>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="6" :span="6" ref="anitem">
          <el-card>
            <div slot="header" style="color: green; font-size: 20px">
              会员卡-购买(元)
            </div>
            <p style="font-size: 14px">实际金额</p>
            <count-to
              class="card-panel-num"
              :startVal="0"
              :endVal="money.earnings.card.actual / 100"
              :duration="2500"
              :decimals="2"
            ></count-to>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" :span="24" ref="anitem">
          <el-card>
            <div slot="header" style="color: blue; font-size: 20px">
              总消费(元)
            </div>
            <p style="font-size: 14px">
              实际金额
              <i style="color: red; font-size: 12px"
                >(注：实际金额= 余额消费的实际金额 + IC卡消费的实际金额 )</i
              >
            </p>

            <count-to
              class="card-panel-num"
              :startVal="0"
              :endVal="
                (money.consumption.balance.actual +
                  money.consumption.ic.actual) /
                100
              "
              :duration="2500"
              :decimals="2"
            ></count-to>

            <div>
              <p style="font-size: 14px">
                赠送金额
                <i style="color: red; font-size: 12px"
                  >(注：赠送金额= 余额消费的赠送金额 + IC卡消费的赠送金额 )</i
                >
              </p>

              <count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="
                  (money.consumption.balance.giving +
                    money.consumption.ic.giving) /
                  100
                "
                :duration="2500"
                :decimals="2"
              ></count-to>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="6" :span="6" ref="anitem">
          <el-card>
            <div slot="header" style="color: blue; font-size: 20px">
              余额-消费(元)
            </div>
            <p style="font-size: 14px">实际金额</p>

            <count-to
              class="card-panel-num"
              :startVal="0"
              :endVal="money.consumption.balance.actual / 100"
              :duration="2500"
              :decimals="2"
            ></count-to>

            <div>
              <p style="font-size: 14px">赠送金额</p>
              <count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.consumption.balance.giving / 100"
                :duration="2500"
                :decimals="2"
              ></count-to>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="6" :span="6" ref="anitem">
          <el-card>
            <div slot="header" style="color: blue; font-size: 20px">
              IC卡-消费(元)
            </div>
            <p style="font-size: 14px">实际金额</p>
            <count-to
              class="card-panel-num"
              :startVal="0"
              :endVal="money.consumption.ic.actual / 100"
              :duration="2500"
              :decimals="2"
            ></count-to>

            <div>
              <p style="font-size: 14px">赠送金额</p>
              <count-to
                class="card-panel-num"
                :startVal="0"
                :endVal="money.consumption.ic.giving / 100"
                :duration="2500"
                :decimals="2"
              ></count-to>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div> -->

    <!-- 地图 -->
    <div>
      <baidu-map
        class="map"
        :center="{ lng: 110.0, lat: 37.0 }"
        :zoom="5"
        :scroll-wheel-zoom="true"
        :double-click-zoom="true"
        :keyboard="true"
        :auto-resize="true"
      >
        <!-- 距离比例尺 -->
        <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
        <!-- 略缩图 -->
        <!-- <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map> -->
        <!--省市级控件  -->
        <bm-navigation
          anchor="BMAP_ANCHOR_TOP_RIGHT"
          :showZoomInfo="true"
        ></bm-navigation>
        <!-- 省市选择 -->
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
        <!-- 定位 -->
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_LEFT"
          :showAddressBar="true"
          :autoLocation="true"
        ></bm-geolocation>
        <!-- maker -->
        <!-- <div v-for="item in deviceIfo" :key="item.longitude+item.latitude"> -->
        <div v-for="item in deviceIfo" :key="item.equipmentId">
          <bm-marker
            title="充电桩信息"
            :position="{ lng: item.longitude, lat: item.latitude }"
            :dragging="false"
            @click="infoWindowOpen(item)"
            class="mapMaker"
          >
            <bm-info-window
              :show="item.showFlag"
              @close="infoWindowClose(item)"
              @open="infoWindowOpen(item)"
            >
              <div class="mapMaker">
                <el-button type="success" class="titleMaker"
                  >设备详细信息</el-button
                >

                <div class="deviceIfo">
                  <p>
                    设备编号:
                    <span>{{ item.equipmentNumber }}</span>
                  </p>
                  <p>
                    设备类型:
                    <span>
                      {{
                        item.equipmentType == 1
                          ? "交流充电桩"
                          : item.equipmentType == 2
                          ? "直流充电桩"
                          : item.equipmentType == 3
                          ? "交直流充电桩"
                          : item.equipmentType == 4
                          ? "大功率充电桩"
                          : "未知"
                      }}
                    </span>
                  </p>
                  <p>
                    设备状态:
                    <span>{{
                      item.equipmentStatus == 1 ? "在线" : "离线"
                    }}</span>
                  </p>
                  <p>
                    设备所在地:
                    <span>{{ item.equipmentAddress }}</span>
                  </p>
                </div>

                <el-button type="success" class="titleMaker"
                  >设备格口状态</el-button
                >

                <div class="deviceIfo">
                  <p>
                    设备格口数:
                    <span>{{ machineInfo.length }}</span>
                  </p>
                  <div class="isUseBox">
                    <div
                      :class="
                        item.isUse == 1
                          ? 'geKou1'
                          : item.isUse == 2
                          ? 'geKou1 geKou2 '
                          : 'geKou1'
                      "
                      v-for="(item, index) in machineInfo"
                      :key="index"
                    >
                      <span>
                        {{
                          item.mouthStatus == 0
                            ? "设备空闲"
                            : item.mouthStatus == 1
                            ? "充电中"
                            : item.mouthStatus == 2
                            ? "电池充满"
                            : item.mouthStatus == 3
                            ? "限额充电"
                            : item.mouthStatus == 4
                            ? "电池识别异常"
                            : item.mouthStatus == 5
                            ? "输出短路故障"
                            : item.mouthStatus == 6
                            ? "输出过压"
                            : item.mouthStatus == 7
                            ? "输出过流"
                            : item.mouthStatus == 8
                            ? "系统过温"
                            : item.mouthStatus == 9
                            ? "NTC异常"
                            : item.mouthStatus == 10
                            ? "电池故障"
                            : item.mouthStatus == 11
                            ? "负载断电"
                            : item.mouthStatus == 12
                            ? "电源故障"
                            : item.mouthStatus == 13
                            ? "通讯超时"
                            : item.mouthStatus == 14
                            ? "过压关机"
                            : item.mouthStatus == 15
                            ? "电池反接"
                            : item.mouthStatus == 16
                            ? "充电超时"
                            : "未知状态"
                        }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </bm-info-window>
          </bm-marker>
        </div>
      </baidu-map>
    </div>

    <el-row>
      <el-col :xs="24" :sm="24" :lg="24" :span="24" ref="anitem">
        <el-card>
          <el-collapse>
            <el-collapse-item title="各省份设备数量">
              <div
                v-for="(item, index) in equipmentNumIfo"
                :key="index"
                class="text item"
              >
                {{ item.province }}: 总数：{{ item.count }}(台) 离线：{{
                  item.offLineCount
                }}(台)
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import "v-charts/lib/style.css";
import { getList, queryProfit, queryOrderCashBydate } from "@/api/home";
import { getEquipmentTotalData, getEquipmentData } from "@/api/map";
import { getCountElectricQuantity } from "@/api/equipmentEle";
import BackToTop from "@/components/BackToTop";
import store from "@/store";
import CountTo from "vue-count-to";
import VeLine from "v-charts/lib/line";
import VePie from "v-charts/lib/pie";
import VeHistogram from "v-charts/lib/histogram";
import Velocity from "velocity-animate";
import "velocity-animate/velocity.ui.js";
import { parseTime } from "@/utils";

import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";

let amapManager = new AMapManager();

export default {
  name: "home",
  components: {
    CountTo,
    VeLine,
    VeHistogram,
    VePie,
    userInfo: "",
    managerTypes: 0,
    BackToTop,
  },
  data() {
    return {
      moneys: [],
      markers: [],
      markerRefs: [],
      plugins: ["MapType", "ToolBar", "Scale", "OverView"],
      //  plugin: [{
      //   pName: 'Scale',
      //   defaultType:1,
      //    events: {
      //     init(instance) {
      //       console.log(instance);
      //     }
      //   }
      //  }],
      events: {
        // click: a => {
        //   var allS = a.target.F.extData;
        //   console.log(allS);
        // },
        init(o) {
          setTimeout(() => {
            // console.log(this.markerRefs);
            let cluster = new AMap.MarkerClusterer(o, this.markerRefs, {
              gridSize: 80,
              renderCluserMarker: this._renderCluserMarker,
            });
            // console.log(cluster);
          }, 1000);
        },
      },
      // 高德
      center: [121.539693, 31.126667], //地图中心点坐标
      zoom: 16, //初始化地图显示层级
      mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
      window: {
        position: [121.59996, 31.197646],
      },
      count: 0,
      slotStyle: {
        padding: "2px 8px",
        background: "#eee",
        color: "#333",
        border: "1px solid #aaa",
      },
      // 地图
      deviceIfo: [],
      // 财务信息
      money: {
        //收益
        earnings: {
          balance: { actual: 0, giving: 0 },
          ic: { actual: 0, giving: 0 },
          card: { actual: 0, giving: 0 },
        },
        //消费
        consumption: {
          balance: { actual: 0, giving: 0 },
          ic: { actual: 0, giving: 0 },
        },
      },

      // 设备信息
      machineInfo: [],
      // equipmentCount
      equipmentNumIfo: [],
      equipmentNum: 0,
      electricQuantity: 0,
      equipmentoffLineNum: 0,
      settings: {
        area: true,
      },
      chartData1: null,
      chartData2: null,
      data: [
        {
          key: "balance",
          label: "净利润",
          defaultLabel: "净利润",
          value: 0,
          duration: 2500,
        },
        {
          key: "userCount",
          label: "当前用户总量",
          defaultLabel: "当前用户总量",
          value: 0,
          duration: 3000,
        },
        {
          key: "orderCount",
          label: "订单量",
          defaultLabel: "订单量",
          value: 0,
          duration: 3500,
        },
        {
          key: "equipCount",
          label: "设备总量",
          defaultLabel: "设备总量",
          value: 0,
          duration: 4500,
        },
      ],

      row1: [],
      row2: [],
      type1: "7",
      type2: "7",
    };
  },

  methods: {
    // 聚合
    _renderCluserMarker(context) {
      const count = this.deviceIfo.length;
      // Math.pow(x,y) pow() 方法可返回 x 的 y 次幂的值。
      //
      let factor = Math.pow(context.count / count, 1 / 18);
      let div = document.createElement("div");
      let Hue = 180 - factor * 180;
      let bgColor = "hsla(" + Hue + ",100%,50%,0.7)";
      let fontColor = "hsla(" + Hue + ",100%,20%,1)";
      electricQuantity;
      let borderColor = "hsla(" + Hue + ",100%,40%,1)";
      let shadowColor = "hsla(" + Hue + ",100%,50%,1)";
      div.style.backgroundColor = bgColor;
      let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
      div.style.width = div.style.height = size + "px";
      div.style.border = "solid 1px " + borderColor;
      div.style.borderRadius = size / 2 + "px";
      div.style.boxShadow = "0 0 1px " + shadowColor;
      div.innerHTML = context.count;
      div.style.lineHeight = size + "px";
      div.style.color = fontColor;
      div.style.fontSize = "14px";
      div.style.textAlign = "center";
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
      context.marker.setContent(div);
    },
    // 获取设备总电量
    async getCountElectricQuantity() {
      try {
        const { data } = await getCountElectricQuantity();
        this.electricQuantity = data;
      } catch (error) {}
    },

    async getMapData() {
      try {
        const { data } = await getEquipmentTotalData();

        let Consumption = data.money.map((item, index) => {
          // money: {
          //       //收益
          //       earnings:{
          //         balance:{actual:0,giving:0},
          //         ic:{actual:0,giving:0},
          //         card:{actual:0,giving:0}
          //         },
          //       //消费
          //       consumption:{
          //         balance:{actual:0,giving:0},
          //         ic:{actual:0,giving:0},}
          //     }

          // 1财务状态 1充电支付 2余额充值  3Ic卡充值 4Ic卡购买 5.会员卡购买 6退款
          //1:微信 2:支付宝 3:余额 4月卡 5 ic卡 6线下
          //收益------------------
          // 2余额充值
          if (item.financeType == 2) {
            if (item.financeDataView) {
              for (let i = 0; i < item.financeDataView.length; i++) {
                //余额充值
                this.money.earnings.balance.actual =
                  this.money.earnings.balance.actual +
                  item.financeDataView[i].expensesAmount;
                this.money.earnings.balance.giving =
                  this.money.earnings.balance.giving +
                  item.financeDataView[i].givenAmount;
              }
            }
          }
          //3Ic卡充值
          if (item.financeType == 3) {
            if (item.financeDataView) {
              for (let i = 0; i < item.financeDataView.length; i++) {
                //ic购买
                this.money.earnings.ic.actual =
                  this.money.earnings.ic.actual +
                  item.financeDataView[i].expensesAmount;
                this.money.earnings.ic.giving =
                  this.money.earnings.ic.giving +
                  item.financeDataView[i].givenAmount;
              }
            }
          }
          //3Ic会员卡
          if (item.financeType == 4) {
            if (item.financeDataView) {
              for (let i = 0; i < item.financeDataView.length; i++) {
                //ic购买
                this.money.earnings.card.actual =
                  this.money.earnings.card.actual +
                  item.financeDataView[i].expensesAmount;
                this.money.earnings.card.giving =
                  this.money.earnings.card.giving +
                  item.financeDataView[i].givenAmount;
              }
            }
          }
          //收益------------------

          //消费----------------

          if (item.financeType == 1) {
            if (item.financeDataView) {
              for (let i = 0; i < item.financeDataView.length; i++) {
                if (item.financeDataView[i].payType == 3) {
                  this.money.consumption.balance.actual =
                    this.money.consumption.balance.actual +
                    item.financeDataView[i].expensesAmount;
                  this.money.consumption.balance.giving =
                    this.money.consumption.balance.giving +
                    item.financeDataView[i].givenAmount;
                } else if (item.financeDataView[i].payType == 5) {
                  this.money.consumption.ic.actual =
                    this.money.consumption.ic.actual +
                    item.financeDataView[i].expensesAmount;
                  this.money.consumption.ic.giving =
                    this.money.consumption.ic.giving +
                    item.financeDataView[i].givenAmount;
                }
              }
            }
          }
          if (item.financeType == 6) {
            if (item.financeDataView) {
              for (let i = 0; i < item.financeDataView.length; i++) {
                if (item.financeDataView[i].payType == 3) {
                  this.money.consumption.balance.actual =
                    this.money.consumption.balance.actual -
                    item.financeDataView[i].expensesAmount;
                  this.money.consumption.balance.giving =
                    this.money.consumption.balance.giving -
                    item.financeDataView[i].givenAmount;
                } else if (item.financeDataView[i].payType == 5) {
                  this.money.consumption.ic.actual =
                    this.money.consumption.ic.actual -
                    item.financeDataView[i].expensesAmount;
                  this.money.consumption.ic.giving =
                    this.money.consumption.ic.giving -
                    item.financeDataView[i].givenAmount;
                }
              }
            }
          }
          return;
        });

        for (let i = 0; i < data.list.length; i++) {
          data.list[i].showFlag = false;
        }
        for (let j = 0; j < data.equipmentCount.length; j++) {
          let num1 = data.equipmentCount[j].count;
          this.equipmentNum = num1 + this.equipmentNum;
          this.equipmentoffLineNum =
            this.equipmentoffLineNum + data.equipmentCount[j].offLineCount;
        }
        this.deviceIfo = data.list;

        this.equipmentNumIfo = data.equipmentCount;
      } catch (err) {
        // console.log(err)
      }
    },

    infoWindowClose(e) {
      e.showFlag = false;
    },

    async infoWindowOpen(e) {
      const { data } = await getEquipmentData({ equipmentId: e.equipmentId });
      this.machineInfo = data.mouthList;

      e.showFlag = true;
    },

    // 获取设备列表
    // async getList() {
    //   const { data } = await getList();
    //   this.data[0].value = data.balance;
    //   this.data[1].value = data.userCount;
    //   this.data[2].value = data.orderCount;
    //   this.data[3].value = data.equipCount;
    // },
    // // 消费订单收入统计图
    // changeTime1 (val) {

    //   this.type1 = val
    //   this.queryProfit()
    // },
    // async queryProfit () {
    //   const { data } = await queryProfit ({
    //     dateType: this.type1
    //   })
    //   console.log(data);
    //    const rows = data.map(item => {

    //       return {
    //           '金额': item.fee,
    //           '日期': item.restulDate
    //       }
    //     })
    //      console.log(rows)
    //     this.chartData1 = {
    //         columns: ['日期', '金额'],
    //         rows
    //     }
    //     console.log(this.chartData1)
    // },
    // // 利润统计图
    // changeTime2 (val) {
    //   this.type2 = val
    //   this.queryOrderCashBydate()
    // },
    // async queryOrderCashBydate () {
    //   const { data } = await queryOrderCashBydate({
    //     dateType: this.type2
    //   })
    //   console.log(data);
    //    const rows = data.map(item => {
    //       return {
    //           '订单量': item.num,
    //           '日期': item.date
    //       }
    //     })
    //     this.chartData2 = {
    //         columns: ['日期', '订单量'],
    //         rows
    //     }
    // },
  },
  created() {

    this.getMapData();
    this.getCountElectricQuantity();
    // this.getList();
    // this.queryProfit();
    // this.queryOrderCashBydate();
    // this.month = new Date().getMonth();
    // this.userInfo = this.$store._modules.root._children.user.state.userInfo;
    // this.managerTypes = this.userInfo.managerType;
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.edit {
  text-align: center;
  width: 100%;
  /deep/ .cons {
    flex-direction: row;
  }
  .cons {
    margin-top: 20px;
  }
  .eqCount,
  .cons {
    display: flex;
    justify-content: space-between;
    // border: 1px solid #c6e579;
    box-shadow: 0px 2px 8px 2px #ccd8dd;

    .consumption {
      // box-shadow: 0px 2px 12px 0px #ebeef5;
      display: flex;
      flex-direction: column;
      width: 330px;
      margin-bottom: 20px;

      .vip {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        span {
          font-size: 25px;
          font-weight: bold;
          color: #000;
        }
      }
      .recharge_Title {
        // line-height: 30px;
        color: blue;
      }
      .actual,
      .give {
        height: 50%;
        // h6 {
        // line-height: 30px;
        // }

        span {
          font-size: 25px;
          font-weight: bold;
          line-height: 45px;
          color: #000;
        }
      }
    }
    .equipment,
    .profit {
      display: flex;
      flex-direction: column;
      width: 330px;
      .eTop,
      .eBottom,
      .pTop,
      .pBottom {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        overflow: hidden;
        text-overflow: ellipsis;
        // .eTitle,
        // .pTitle {
        //   // line-height: 30px;
        // }
        span {
          font-size: 25px;
          font-weight: bold;
          line-height: 45px;
          color: #000;
        }
      }
    }
    .balance {
      display: flex;
      flex-direction: column;
      width: 330px;
      .vip {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        span {
          font-size: 25px;
          font-weight: bold;
          color: #000;
        }
      }
      .recharge_Title {
        // line-height: 30px;
        color: green;
      }
      .actual,
      .give {
        height: 50%;
        // h6 {
        //   // line-height: 30px;
        // }

        span {
          font-size: 25px;
          font-weight: bold;
          line-height: 45px;
          color: #000;
        }
      }
    }
  }
}
.card-panel-num {
  font-size: 30px;
}
.el-col {
  margin-bottom: 8px;
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
.map {
  width: 100%;
  height: 550px;
  padding: 5px;
  border: 1px solid #ccc;
}
.titleMaker {
  margin-left: 5px;
}
.mapMaker {
  font-size: 14px;
  color: #303133;
  p {
    font-size: 16px;
    color: #000;
    line-height: 14px;
    text-indent: 2px;
  }
  span {
    color: #000;
  }
}
.deviceIfo {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 5px;
}
.isUseBox {
  display: flex;
}
.geKou1 {
  float: left;
  height: 30px;
  width: 60px;
  background-color: #67c23a;
  border: 1px solid #67c23a;
  border-radius: 4px;
  margin: 2px;
  display: flex;

  span {
    color: #fff;
    display: flex;
    margin: auto;
  }
}
.geKou2 {
  background-color: #e6a23c;
  border: 1px solid #e6a23c;
}
</style>

